<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form :inline="true" :model="listQuery">
        <el-form-item label="标题">
          <el-input v-model="listQuery.title" placeholder="标题" style="width: 200px" @keyup.enter.native="handleFilter" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="listQuery.status" style="width: 140px" @change="handleFilter">
            <el-option v-for="item in statusOptions" :key="item.key" :label="item.label" :value="item.key" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleFilter">搜 索</el-button>
          <el-button type="primary" icon="el-icon-plus" @click="handleCreate">添 加</el-button>
        </el-form-item>
      </el-form>
    </div>

    <point-progress v-model="active" :progress-list="progressList" @change="(value) => (active = value)" />

    <el-table v-loading="listLoading" :data="list" border style="width: 100%">
      <el-table-column label="序号" type="index" align="center" width="60px" />
      <el-table-column label="日期" prop="date" width="150px" align="center" />
      <el-table-column label="标题" prop="title" min-width="150px" />
      <el-table-column label="状态" prop="status" align="center" class-name="status-col" width="180">
        <template slot-scope="{ row }">
          <el-tag v-if="row.status === '0'" type="warning">未完成</el-tag>
          <el-tag v-if="row.status === '1'" type="success">已完成</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="140" class-name="small-padding fixed-width">
        <template slot-scope="{ row }">
          <el-button type="text" icon="el-icon-view" size="mini" @click="handleView(row)">查 看</el-button>
          <el-button type="text" icon="el-icon-edit" size="mini" @click="handleUpdate(row)">编 辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <approve-create :open="open" :form-data="form" @close="handleClose" />
    <approve-details :open="viewopen" :form-data="form" @close="viewopen = false" />
  </div>
</template>

<script>
import Create from './create.vue';
import Details from './details.vue';
export default {
  name: 'approve',
  components: { 'approve-create': Create, 'approve-details': Details },
  data() {
    return {
      active: 0,
      progressList: [
        { label: '全部', value: 0, number: 78 },
        { label: '目标待设定', value: 1, number: 7997 },
        { label: '评估待设定', value: 2 },
        { label: '目标待设定', value: 3, number: 7997 },
        { label: '评估待设定', value: 4 },
        { label: '目标待设定', value: 5, number: 7997 },
        { label: '评估待设定', value: 6 },
        { label: '目标待设定', value: 7, number: 7997 },
        { label: '评估待设定', value: 8 },
      ],
      list: [{ date: '2021-09-14', title: '流浪法师瑞兹的请假审批！！！', status: '1' }],
      total: 0,
      listLoading: false,
      listQuery: {
        page: 1,
        limit: 20,
        title: undefined,
        status: undefined,
      },
      statusOptions: [
        { label: '未完成', key: '0' },
        { label: '已完成', key: '1' },
      ],
      form: {},
      open: false,
      viewopen: false,
    };
  },
  created() {},
  methods: {
    handleFilter() {},
    handleCreate() {
      this.form = {};
      this.open = true;
    },
    handleClose() {
      this.open = false;
    },
    handleView() {
      this.form = {
        id: 1,
        date: '2021-09-14',
        title: '流浪法师瑞兹的请假审批！！！',
        status: '1',
      };
      this.viewopen = true;
    },
    handleUpdate(row) {
      this.form = Object.assign({}, row);
      this.open = true;
    },
    handleDelete() {},
  },
};
</script>
